<!-- 站点选择下拉框 -->
<template>
  <el-select
    multiple
    clearable
    :model-value="id"
    :placeholder="placeholder"
    class="ele-fluid"
    @update:modelValue="updateValue"
  >
    <el-option
      v-for="item in data"
      :key="item.id"
      :value="item.site_id"
      :label="item.region_name"
    />
  </el-select>
</template>

<script setup>
  import { ref, computed } from 'vue';
  import { EleMessage } from 'ele-admin-plus/es';
  import { getCityList } from '@/api/region';

  const emit = defineEmits(['update:modelValue']);

  const props = defineProps({
    /** 选中的站点 */
    modelValue: Array,
    /** 提示文本 */
    placeholder: {
      type: String,
      default: '请选择站点'
    }
  });

  /** 选中的站点id */
  const id = computed(() => props.modelValue?.map?.((d) => d.id));

  /** 站点数据 */
  const data = ref([]);

  /** 更新选中数据 */
  const updateValue = (value) => {
    emit(
      'update:modelValue',
      value.map((v) => ({ id: v }))
    );
  };

  /** 获取站点数据 */
  getCityList({})
    .then((res) => {
      console.log(res);
      data.value = res.list;
    })
    .catch((e) => {
      EleMessage.error(e.message);
    });
</script>
